<!--#include file="top.php" -->
<link rel="stylesheet" type="text/css" href="../misc/css/base.css"  /> 
<style type="text/css">
/* 圆角DIV */
.roundC{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.roundC-top{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.roundC-bottom{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}
</style>
<p>FF下做圆角的例子</p>
<div style="margin:20px;padding:30px;height:100px;background-color:#FFFFCC;border:1px solid #CCCCCC" class="roundC">
	是不是有圆角啊？(显示只能在FF下有效果，IE是要另一种方式，请看)
</div>


<!-- IE下做圆角的例子 -->
<p>IE下做圆角的例子</p>
<style type="text/css">
.b1, .b2, .b3, .b4{
font-size:1px;
overflow:hidden;
display:block;
} 
.b1{
height:1px;
background:#888;
margin:0 5px;
} 
.b2{
height:1px;
background:#FFFFAE;
border-right:2px solid #888;
border-left:2px solid #888;
margin:0 3px;
} 
.b3 {
height:1px;
background:#FFFFAE;
border-right:1px solid #888;
border-left:1px solid #888;
margin:0 2px;
} 
.b4 {
height:2px;
background:#FFFFAE;
border-right:1px solid #888;
border-left:1px solid #888;
margin:0 1px;
} 
.contentb {
background: #FFFFAE;
border-right:1px solid #888;
border-left:1px solid #888;
}
.contentb div {
padding:0px 5px;
height:100px;
}
</style>
<div style="margin:20px;padding:30px;">
	<b class="b1"></b>
	<b class="b2"></b>
	<b class="b3"></b>
	<b class="b4"></b>
	<div class="contentb">
		<div>
			Round Border!!
		</div>
	</div>
	<b class="b4"></b>
	<b class="b3"></b>
	<b class="b2"></b>
	<b class="b1"></b>
</div>
 
<!--#include file="bottom.php" -->
